import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import axios from 'axios'
import {connect} from 'react-redux'
import {updateProductAction} from '../../store/actionCreator'
import './NewItemList.scss'
class NewItemList extends Component {
  state = {
    newItemList: []
  }
  componentDidMount() {
    axios.get('./data/home.json').then(res => {
      this.setState({
        /* 轮播图列表 */
        newItemList: [res.data.data.data.newItemList.slice(0, 3), res.data.data.data.newItemList.slice(3,6)]
      })
    })
  }
  render() {
    return (
      <div>
        {
          this.state.newItemList && this.state.newItemList.map((item, i) => (
            <div className='NewItemList' key={i}>
              {
                item.map(v => (
                  <div className="NewItemListItem" key={v.displaySkuId} onClick={() => {
                    this.props.history.push("/ProductDetail/?id=" + v.id)
                  }}>
                    <img src={v.primaryPicUrl} alt="" />
                    <div className="newItemTitle">{v.name}</div>
                    <div className="newItemPrice">¥{v.retailPrice}</div>
                    <div className="newItemTag">
                      {
                        v.itemTagList && v.itemTagList.map(val => (
                          <span key={val.tagId + '-' + v.itemId}>{val.name}</span>
                        ))
                      }
                    </div>
                  </div>
                ))
              }
            </div>

          ))
        }

      </div>
    )
  }
}
const mapStateToProps=(state)=>{
  return{
    productReducer:state.getIn(['productReducer'])
  } 
}
const mapDispatchToProps=(dispatch)=>{
  return {
    updateProduct:(detail)=>{
      dispatch(updateProductAction(detail))
    }
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(withRouter(NewItemList))